// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.counter-box {
  @top: counter-box;

  @color-deleted: black;
  @color-mapper-notes: var(--beatmapset-discussion-colour--mapper_note);
  @color-mine: @yellow-darker;
  @color-pending: @pink-darker;
  @color-praises: @blue-darker;
  @color-resolved: @green;
  @color-total: #fff;

  .border(@color) {
    box-shadow: 0 0 0 2px @color;
  }

  .with-active(@color) {
    &:hover,
    &:focus,
    &:active,
    &.js-active {
      .border(@color);
    }
  }

  .default-border-radius();
  .border(hsla(var(--hsl-b5), 0.25));
  background-color: @osu-colour-b5;

  color: @osu-colour-c1;

  display: inline-flex;
  justify-content: space-between;
  padding: 7.5px;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
    color: @osu-colour-c1;
  }

  &--beatmap-discussions {
    margin: 5px;
    height: var(--box-height);
  }

  &--info {
    padding: 10px 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    flex-direction: column;
  }

  &--ranking {
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
    flex-direction: column;
  }

  &--deleted {
    .with-active(@color-deleted);
  }

  &--pending {
    .with-active(@color-pending);
  }

  &--praises {
    .with-active(@color-praises);
  }

  &--mapper-notes {
    .with-active(@color-mapper-notes);
  }

  &--mine {
    .with-active(@color-mine);
  }

  &--resolved {
    .with-active(@color-resolved);
  }

  &--total {
    .with-active(@color-total);
  }

  &__content {
    line-height: 1;
  }

  &__count {
    font-size: @font-size--large;
    font-weight: 300;

    .@{top}--info & {
      color: @osu-colour-c2;
    }
  }

  &__line {
    .default-border-radius();
    width: 2px;
    margin-left: 10px;

    .@{top}--deleted & {
      background-color: @color-deleted;
    }

    .@{top}--mapper-notes & {
      background-color: @color-mapper-notes;
    }

    .@{top}--pending & {
      background-color: @color-pending;
    }

    .@{top}--praises & {
      background-color: @color-praises;
    }

    .@{top}--mine & {
      background-color: @color-mine;
    }

    .@{top}--resolved & {
      background-color: @color-resolved;
    }

    .@{top}--total & {
      background-color: @color-total;
    }
  }

  &__title {
    margin-right: 30px;
    font-weight: 600;
    font-size: @font-size--small;
    white-space: nowrap;

    .@{top}--beatmap-discussions & {
      margin-right: 10px;
    }

    .@{top}--info & {
      font-weight: normal;
      margin-right: 0;
    }
  }
}
